<template>
    <van-tabbar class="nav-menu-01" fixed :class="iphoneXFlag ? 'iphonex' : ''" v-model="localActive">
        <van-tabbar-item to="/application" >
            <i
            slot="icon"
            slot-scope="props"
            class="iconfont icon-OAshenpi tabIcon"></i>
            <!-- 报名 -->
            <span>{{ $t("sign") }}</span>
        </van-tabbar-item>
        <van-tabbar-item to="/courseManage" >
            <i
            slot="icon"
            slot-scope="props"
            class="iconfont icon-peixunbaoming tabIcon"></i>
            <!-- 课程 -->
             <span>{{ $t("menu_course") }}</span>
        </van-tabbar-item>
        <van-tabbar-item to="/examManage" >
            <i
            slot="icon"
            slot-scope="props"
            class="iconfont icon-zhinengtianbiao tabIcon"></i>
            <!-- 考试 -->
            <span>{{ $t("personal_my_data_exam") }}</span>
        </van-tabbar-item>
        <van-tabbar-item to="/trainManege" >
            <i
            slot="icon"
            slot-scope="props"
            class="iconfont icon-peixunguanli tabIcon"></i>
            <!-- 培训 -->
            <span>{{$t('certified_courses')}}</span>
        </van-tabbar-item>
        <van-tabbar-item to="/workbenches" >
            <i
            slot="icon"
            slot-scope="props"
            class="iconfont icon-gongzuotai tabIcon"></i>
            <!-- 工作台 -->
            <span>{{$t('workbenches')}}</span>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script>
import mixin from '@/components/mixin/Mixin.js';
export default {
    name: 'BottomNavigation',
    mixins: [mixin],
    props: {
        active: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            localActive: this.active,
            encId: '',
            encIdWb: '',
            iphoneXFlag: false
        };
    },
    methods: {
        init() {
            if (window.localStorage.getItem('loginUser')) {
                this.encId = window.localStorage.getItem('loginUser');
                this.encIdWb = this.wbEncryptor(window.localStorage.getItem('loginUser'));
            } else {
                this.$axios({
                    method: 'GET',
                    url: '/app/api/user/current'
                }).then(res => {
                    this.encId = res.data.usrEntId;
                    this.encIdWb = this.wbEncryptor(this.encId);
                });
            }
        },
        isIPhoneX() {
            var u = navigator.userAgent;
            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isIOS) {
                let target = screen.width + 'x' + screen.height;
                let ihpneType = {
                    '414x896': 'iphoneXR',
                    '375x812': 'iphoneX'
                };
                if (ihpneType[target]) {
                    //是iphoneX
                    this.iphoneXFlag = true;
                }
            }
        }
    },
    mounted() {
        this.init();
        this.isIPhoneX();
    },
    activated() {
        this.init();
    },
    computed: {
        pathSelected() {
            return function(tab) {
                if (this.$route.path.indexOf(tab) !== -1) {
                    return true;
                } else {
                    return false;
                }
            };
        }
    },
    watch: {
        active: {
            handler(newValue) {
                this.localActive = newValue; // 当 prop 改变时，更新本地数据
            },
            immediate: true // 立即执行，确保初始值正确
        }
    }
};
</script>

<style scoped lang="less">
/deep/.weui-tabbar.nav-menu-01 .weui-tabbar__icon{
    position: relative;
}
.iphonex {
    padding-bottom: 6px;
}
.tabIcon{
    display: inline-block;
    width: 30px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    font-size: 22px;
}
</style>
